<div class="span10">
            <div class="row-fluid">
                <div class="span12 box">
                    <div class="box-head"><h3>&#8212; Revenue</h3></div>
                    <div class="box-content">
                        <div class="content-inner">
                            <div class="income btn-danger">
                                <div class="row-fluid">
                                    <div class="span4">
                                        <h1>Revenue</h1>
                                        <p>Time by time</p>
                                    </div>
                                    <div class="span2">
                                        <h1>$50</h1>
                                        <p>Today <i class="icon-arrow-up"></i> </p>
                                    </div>
                                    <div class="span2">
                                        <h1>$950</h1>
                                        <p>This week <i class="icon-resize-horizontal"></i> </p>
                                    </div>
                                    <div class="span2">
                                        <h1>$2,450</h1>
                                        <p>This month <i class="icon-fire"></i></p>
                                    </div>
                                    <div class="span2">
                                        <h1>$8,060</h1>
                                        <p>Total</p>
                                    </div>
                                </div> <!-- row -->
                            </div> <!-- income -->
                            <br class="clearfix" />
                            <div id="revenue" class="charts"></div>
                        </div> <!-- content-inner -->
                    </div> <!-- box-content -->
                </div> <!-- span -->
            </div> <!-- row -->
            
            <div class="row-fluid">
                <div class="span12 box">
                    <div class="box-head"><h3>&#8212; New Registration</h3></div>
                    <div class="box-content">
                        <div class="content-inner">
                            <div class="income btn-warning">
                                <div class="row-fluid">
                                    <div class="span4">
                                        <h1>New Registration</h1>
                                        <p>Time by time</p>
                                    </div>
                                    <div class="span2">
                                        <h1>10</h1>
                                        <p>Today <i class="icon-arrow-up"></i></p>
                                    </div>
                                    <div class="span2">
                                        <h1>110</h1>
                                        <p>This week <i class="icon-arrow-up"></i></p>
                                    </div>
                                    <div class="span2">
                                        <h1>450</h1>
                                        <p>This month <i class="icon-resize-horizontal"></i></p>
                                    </div>
                                    <div class="span2">
                                        <h1>2,320</h1>
                                        <p>Total</p>
                                    </div>
                                </div><!--/row-->
                            </div><!-- income -->
                            <br class="clearfix" />
                            <div id="newUser" class="charts"></div>
                        </div> <!-- content-inner -->
                    </div> <!-- box-content -->
                </div> <!-- span -->
            </div> <!-- row -->
            
            <div class="row-fluid">
                <div class="span12 box">
                    <div class="box-head"><h3>&#8212; New Comment</h3></div>
                    <div class="box-content">
                        <div class="content-inner">
                            <div class="income btn-inverse">
                                <div class="row-fluid">
                                    <div class="span4">
                                        <h1>New Comment</h1>
                                        <p>Time by time</p>
                                    </div>
                                    <div class="span2">
                                        <h1>15</h1>
                                        <p>Today <i class="icon-white icon-resize-horizontal"></i></p>
                                    </div>
                                    <div class="span2">
                                        <h1>250</h1>
                                        <p>This week <i class="icon-white icon-arrow-down"></i></p>
                                    </div>
                                    <div class="span2">
                                        <h1>650</h1>
                                        <p>This month <i class="icon-white icon-arrow-up"></i></p>
                                    </div>
                                    <div class="span2">
                                        <h1>1960</h1>
                                        <p>Total</p>
                                    </div>
                                </div><!--/row-->
                            </div><!-- income -->
                            <br class="clearfix" />
                            <div id="newComment" class="charts"></div>
                        </div> <!-- content-inner -->
                    </div> <!-- box-content -->
                </div> <!-- span -->
            </div> <!-- row -->
            
            <div class="row-fluid">
                <div class="span12 box">
                    <div class="box-head"><h3>&#8212; User Review</h3></div>
                    <div class="box-content">
                        <div class="content-inner">
                            <div class="income btn-info">
                                <div class="row-fluid">
                                    <div class="span4">
                                        <h1>User Review</h1>
                                        <p>Time by time</p>
                                    </div>
                                    <div class="span2">
                                        <h1>200</h1>
                                        <p>Today <i class="icon-arrow-up"></i></p>
                                    </div>
                                    <div class="span2">
                                        <h1>1,950</h1>
                                        <p>This week <i class="icon-fire"></i></p>
                                    </div>
                                    <div class="span2">
                                        <h1>3,450</h1>
                                        <p>This month  <i class="icon-fire"></i></p>
                                    </div>
                                    <div class="span2">
                                        <h1>5,600</h1>
                                        <p>Total</p>
                                    </div>
                                </div>
                            </div><!-- income -->
                            <br class="clearfix" />
                            <div id="newReview" class="charts"></div>
                        </div> <!-- content-inner -->
                    </div> <!-- box-content -->
                </div> <!-- span -->
            </div> <!-- row -->
            
            <div class="row-fluid">
                <div class="span12 box">
                    <div class="box-head"><h3>&#8212; New Articles</h3></div>
                    <div class="box-content">
                        <div class="content-inner">
                            <div class="income btn-success">
                                <div class="row-fluid">
                                    <div class="span4">
                                        <h1>New Articles</h1>
                                        <p>Time by time</p>
                                    </div>
                                    <div class="span2">
                                        <h1>4</h1>
                                        <p>Today <i class="icon-resize-horizontal"></i></p>
                                    </div>
                                    <div class="span2">
                                        <h1>32</h1>
                                        <p>This week <i class="icon-arrow-down"></i></p>
                                    </div>
                                    <div class="span2">
                                        <h1>150</h1>
                                        <p>This month <i class="icon-resize-horizontal"></i></p>
                                    </div>
                                    <div class="span2">
                                        <h1>560</h1>
                                        <p>Total</p>
                                    </div>
                                </div>
                            </div><!-- income -->
                            <br class="clearfix" />
                            <div id="newArticles" class="charts"></div>
                        </div> <!-- content-inner -->
                    </div> <!-- box-content -->
                </div> <!-- span -->
            </div> <!-- row -->
            
            <div class="row-fluid">
                <div class="span12">
                    <div class="row-fluid">
                        <div class="span6 box">
                            <div class="box-head"><h3>&#8212; Browser</h3></div>
                            <div class="box-content"><div class="charts" id="browser"></div></div>
                        </div>
                        <div class="span6 box">
                            <div class="box-head"><h3>&#8212; Visitor</h3></div>
                            <div class="box-content"><div class="charts" id="visitor"></div></div>
                        </div>
                    </div>
                </div>
            </div><!-- row -->
          
        </div><!--/span-->
      </div><!--/row-->

      <hr class="alt">

      <footer>
        <p>&copy; MES ADMIN 2012. All right reserved.</p>
      </footer>

    </div><!--/.fluid-container-->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/mes-admin.js"></script>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <!--<script src="js/charts.js"></script>-->
    <script>
        google.load("visualization", "1", {packages:["corechart"]});
        
        //column chart
        google.setOnLoadCallback(revenue);
        function revenue(){
        var data = google.visualization.arrayToDataTable([
          ['Month', 'Revenue($)'],
          ['February', 1010],
          ['March', 1000],
          ['April',  1150],
          ['May', 1200],
          ['June', 1250],
          ['July', 2450]
        ]);

        var options = {
          title: 'Revenue',
          hAxis: {title: 'Month', titleTextStyle: {color: 'red'}}
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('revenue'));
        chart.draw(data, options);
        }
        
        //area chart
        google.setOnLoadCallback(newUser);
        function newUser(){
           var gbr = google.visualization.arrayToDataTable([
          ['Month', 'User'],
          ['February', 110],
          ['March', 300],
          ['April',  420],
          ['May', 500],
          ['June', 450],
          ['July', 450]
        ]);

        var opt = {
          title: 'New User',
          hAxis: {title: 'Month',  titleTextStyle: {color: 'red'}}
        };

        var chart = new google.visualization.AreaChart(document.getElementById('newUser'));
        chart.draw(gbr, opt); 
        }
        
        //line chart
        google.setOnLoadCallback(newComment);
        function newComment(){
        var data = google.visualization.arrayToDataTable([
          ['Month', 'Comment'],
          ['February', 210],
          ['March', 100],
          ['April',  420],
          ['May', 80],
          ['June', 500],
          ['July', 650]
        ]);

        var options = {
          title: 'New Comments'
        };

        var chart = new google.visualization.LineChart(document.getElementById('newComment'));
        chart.draw(data, options);
        }
        
        //bar chart
        google.setOnLoadCallback(newReview);
        function newReview(){
            var data = google.visualization.arrayToDataTable([
          ['Month', 'Review'],
          ['February', 170],
          ['March', 700],
          ['April',  420],
          ['May', 800],
          ['June', 950],
          ['July', 3450]
        ]);

        var options = {
          title: 'New Review',
          vAxis: {title: 'Month',  titleTextStyle: {color: 'red'}}
        };

        var chart = new google.visualization.BarChart(document.getElementById('newReview'));
        chart.draw(data, options);
        }
        
        //line chart
        google.setOnLoadCallback(newArticles);
        function newArticles(){
            var data = google.visualization.arrayToDataTable([
          ['Month', 'Articles'],
          ['February', 40],
          ['March', 30],
          ['April',  120],
          ['May', 70],
          ['June', 150],
          ['July', 150]
        ]);

        var options = {
          title: 'Articles'
        };

        var chart = new google.visualization.LineChart(document.getElementById('newArticles'));
        chart.draw(data, options);
        }
        
        //pie chart
        google.setOnLoadCallback(browser);
        function browser(){
            var data = google.visualization.arrayToDataTable([
          ['Browser', 'Hours per Day'],
          ['Chrome',     125],
          ['Firefox',      100],
          ['Internet Explorer',  20],
          ['Safari', 45],
          ['Opera',    25]
        ]);

        var options = {
          title: 'Browser Usage'
        };

        var chart = new google.visualization.PieChart(document.getElementById('browser'));
        chart.draw(data, options);
        
        }
        
        //combo chart
        google.setOnLoadCallback(visitor);
        function visitor(){
            var data = google.visualization.arrayToDataTable([
            ['Month', 'Visitor', 'Spider', 'Subscribe'],
          ['February',  1000,      400, 200],
          ['March',  1170,      460, 150],
          ['April',  660,       1120, 720],
          ['May',  1030,      540, 800],
          ['June',  1660,       720, 820],
          ['July',  2200,      540, 900]
        ]);

        var options = {
            title : 'Statistics',
            vAxis: {title: "Amount"},
            hAxis: {title: "Month"},
            seriesType: "bars",
            forceIFrame: false,
            series: {2: {type: "line"}}
        };

        var chart = new google.visualization.ComboChart(document.getElementById('visitor'));
        chart.draw(data, options);
        }
    </script>
    
  </body>
</html>
